<template>
  <div class="button">
    <div class="nav">
      <div
        class="nav-item"
        v-for="(item, index) in nav"
        :key="item.title"
        @click="buto(index)"
      >
        <router-link :to="{ path: item.path }">
          <img :src="index === idx ? item.img_g2 : item.img_g1" alt="" />
          <p style="color: aliceblue; font-size: 12px">{{ item.title }}</p>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import imag_g1 from ".././public/image/智能检测.jpg";
// import imag_g2 from ".././public/image/智能检测-active.jpg";
// import imag_k1 from ".././public/image/就业态势.jpg";
// import imag_k2 from ".././public/image/就业态势-active.jpg";
// import imag_e1 from ".././public/image/安防管理.jpg";
// import imag_e2 from ".././public/image/安防管理-active.jpg";
// import imag_t1 from ".././public/image/设备运维.jpg";
// import imag_t2 from ".././public/image/设备运维-active.jpg";
</script>

<style scoped>
.box {
  width: 100vw;
  height: 100vh;
  position: relative;
}
</style>